<template>
	<view class="audit-page">
		<view class="top-operate-btn">
			<view class="left" @click="btnGoOrder">
				<view class="left-image">
					<image style="width: 80rpx" src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/audit/order.png" mode="widthFix"></image>
				</view>
				<view class="title">我的订单</view>
			</view>
			<view class="right" @click="btnGoCar">
				<view class="right-image">
					<image style="width: 100rpx" src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/audit/carAvatar.png" mode="widthFix"></image>
				</view>
				<view class="title">我的车辆</view>
			</view>
		</view>
		<view class="center-menu-icon">
			<view class="menu-left" @click="btnGoMoney">
				<view class="menu-left-image">
					<image style="width: 80rpx" src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/audit/paymoney.png" mode="widthFix"></image>
				</view>
				<view class="menu-left-title">停车缴费</view>
			</view>
			<view class="menu-right" @click="btnPhone">
				<view class="menu-right-image">
					<image style="width: 80rpx" src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/audit/phone.png" mode="widthFix"></image>
				</view>
				<view class="menu-right-title">联系客服</view>
			</view>
		</view>
		<view class="license-plate">
			<view class="car-header">
				<view class="plate-left">
					{{ defaultNum ? defaultNum : '暂无车辆信息' }}
					<uni-icons type="down" size="20" color="#a3c2fe"></uni-icons>
				</view>
				<view class="plate-right" @click="changeCarNum">
					<uni-icons type="compose" size="20" color="#a3c2fe"></uni-icons>
					更改车牌
				</view>
			</view>
			<view class="car-container">
				<view class="no-message">未查询到入场信息</view>
				<view class="consulting-service">如在场内请咨询收费处</view>
				<view class="refresh">
					<image @click="refreshBtn" style="width: 250rpx" src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/audit/refrash.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed, defineAsyncComponent } from 'vue';
import { onLoad, onPageScroll, onReady, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import initApi from '@/apis/init.js';
import { useUserStore } from '@/store/user.js';
import { constStore } from '@/store/const.js';
const defaultNum = ref('');
const constInfo = constStore();
onMounted(() => {
	console.log('onMounted');
	defaultNum.value = uni.getStorageSync('userCarNum');
});
const btnPhone=()=>{
	uni.makePhoneCall({
		phoneNumber: '400-8825101' //客服
	});
}
onShow(() => {
	console.log('onShow');
	defaultNum.value = uni.getStorageSync('userCarNum');
});
const numberInputResult = (e) => {
	console.log(e);
};
const btnGoMoney=()=>{
	return uni.utils.toast('暂未查询缴费订单');
}
const refreshBtn = () => {
	console.log('item');
	return uni.utils.toast('暂未查询到订单 请咨询该停车场管理员');
};
const changeCarNum = () => {
	uni.navigateTo({
		url: '/pages/index/addCarNum'
	});
};
const btnGoOrder=()=>{
	uni.navigateTo({
		url:'/pages/index/myOrderCar'
	})
}
const btnGoCar=()=>{
	uni.navigateTo({
		url:'/pages/index/myCar'
	})
}
</script>

<style lang="scss" scoped>
.license-plate {
	width: 694rpx;
	height: 374rpx;
	margin: 0 auto;

	background: #ffffff;
	box-shadow: 0rpx 1rpx 6rpx 0rpx rgba(28, 28, 28, 0.18);
	border-radius: 35rpx;
	.car-container {
		height: 300rpx;
		padding: 25rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		.no-message {
			font-weight: 500;
			font-size: 34rpx;
			color: #414141;
		}
		.consulting-service {
			font-weight: 500;
			font-size: 29rpx;
			color: #999999;
		}
		.refresh {
		}
	}
	.car-header {
		width: 694rpx;
		height: 74rpx;
		background-color: #edf4fe;
		border-radius: 35rpx 35rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		.plate-left {
			font-weight: 800;
			font-size: 34rpx;
			color: #010206;
		}
		.plate-right {
			font-weight: 500;
			font-size: 27rpx;
			color: #8f939e;
			display: flex;
			align-items: center;
		}
	}
}
.center-menu-icon {
	height: 210rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 700rpx;
	padding: 10rpx;
	box-sizing: border-box;
	margin: 0 auto;
	.menu-left {
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
	.menu-right {
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
}
.top-operate-btn {
	height: 180rpx;
	background-color: #4785fb;
	width: 700rpx;
	border-radius: 10rpx;
	margin: 0 auto;
	margin-top: 10rpx;
	display: flex;
	padding: 20rpx;
	box-sizing: border-box;
	justify-content: space-around;
	.left {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
	}
	.right {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
	}
}
</style>
